<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
<html> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Pivot Table &#187; </title> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="pivot.js"></script> 
    <script type="text/javascript"> 
      // Load the Visualization API and the table package.
      google.load('visualization', '1', {'packages':['table']});
    </script>    
 
<script> 
google.setOnLoadCallback(drawChart);
 

function drawChart() {
  var gviz_table = new google.visualization.DataTable();
  gviz_table.addColumn('date', 'Date', 'date');
  gviz_table.addColumn('string', 'Department', 'dept');
  gviz_table.addColumn('string', 'Person', 'person');
  gviz_table.addColumn('number', 'Income', 'income');
  gviz_table.addColumn('number', 'Expense', 'expense');
  gviz_table.addRows(12);
  gviz_table.setCell(0, 0, new Date(2010,9,17));
  gviz_table.setCell(0, 1, 'Accounts');
  gviz_table.setCell(0, 2, 'Kate');
  gviz_table.setCell(0, 3, 0);
  gviz_table.setCell(0, 4, 10);
  gviz_table.setCell(1, 0, new Date(2010,9,17));
  gviz_table.setCell(1, 1, 'Marketing');
  gviz_table.setCell(1, 2, 'John');
  gviz_table.setCell(1, 3, 0);
  gviz_table.setCell(1, 4, 20);
  gviz_table.setCell(2, 0, new Date(2010,9,17));
  gviz_table.setCell(2, 1, 'Marketing');
  gviz_table.setCell(2, 2, 'Paul');
  gviz_table.setCell(2, 3, 6);
  gviz_table.setCell(2, 4, 15);
  gviz_table.setCell(3, 0, new Date(2010,9,17));
  gviz_table.setCell(3, 1, 'Accounts');
  gviz_table.setCell(3, 2, 'Mary');
  gviz_table.setCell(3, 3, 17);
  gviz_table.setCell(3, 4, 19);
  gviz_table.setCell(4, 0, new Date(2010,9,18));
  gviz_table.setCell(4, 1, 'Accounts');
  gviz_table.setCell(4, 2, 'Peter');
  gviz_table.setCell(4, 3, 0);
  gviz_table.setCell(4, 4, 3);
  gviz_table.setCell(5, 0, new Date(2010,9,18));
  gviz_table.setCell(5, 1, 'Marketing');
  gviz_table.setCell(5, 2, 'Vince');
  gviz_table.setCell(5, 3, 0);
  gviz_table.setCell(5, 4, 3);
  gviz_table.setCell(6, 0, new Date(2010,9,18));
  gviz_table.setCell(6, 1, 'Accounts');
  gviz_table.setCell(6, 2, 'Kate');
  gviz_table.setCell(6, 3, 0);
  gviz_table.setCell(6, 4, 3);
  gviz_table.setCell(7, 0, new Date(2010,9,18));
  gviz_table.setCell(7, 1, 'HR');
  gviz_table.setCell(7, 2, 'Laura');
  gviz_table.setCell(7, 3, 0);
  gviz_table.setCell(7, 4, 2);
  gviz_table.setCell(8, 0, new Date(2010,9,18));
  gviz_table.setCell(8, 1, 'Marketing');
  gviz_table.setCell(8, 2, 'John');
  gviz_table.setCell(8, 3, 1);
  gviz_table.setCell(8, 4, 13);
  gviz_table.setCell(9, 0, new Date(2010,9,18));
  gviz_table.setCell(9, 1, 'Marketing');
  gviz_table.setCell(9, 2, 'Paul');
  gviz_table.setCell(9, 3, 20);
  gviz_table.setCell(9, 4, 11);
  gviz_table.setCell(10, 0, new Date(2010,9,18));
  gviz_table.setCell(10, 1, 'Marketing');
  gviz_table.setCell(10, 2, 'Sarah');
  gviz_table.setCell(10, 3, 4);
  gviz_table.setCell(10, 4, 9);
  gviz_table.setCell(11, 0, new Date(2010,9,17));
  gviz_table.setCell(11, 1, 'Marketing');
  gviz_table.setCell(11, 2, 'Sarah');
  gviz_table.setCell(11, 3, 2);
  gviz_table.setCell(11, 4, 1);
 

  // draw our plain and simple table
  var chart = new google.visualization.Table(document.getElementById('base_gviztable')); 
  chart.draw(gviz_table);

  // draw our table pivoted by the person
  var user_chart = new google.visualization.Table(document.getElementById('user_pivot_gviztable')); 
  user_pivot = PivotTable(gviz_table, 2, 0, {'agg':[{'aggType':'sum', 'valueIndex':3},
                                                      {'aggType':'sum', 'valueIndex':4}]
                                            }
                         );                                      
  user_chart.draw(user_pivot);

  // draw our table pivoted by the person, by income only. we need to hide the expenses columns as result
  var user_chart_inc = new google.visualization.Table(document.getElementById('user_pivot_gviztable_income')); 
  user_pivot_inc = PivotTable(gviz_table, 2, 0, {'agg':[{'aggType':'sum', 'valueIndex':3}],
                                                 'hideCols':[4],
                                                }
                         );                                      
  user_chart_inc.draw(user_pivot_inc);


  // draw our table pivoted by the dept
  var dept_chart = new google.visualization.Table(document.getElementById('dept_pivot_gviztable')); 
  dept_pivot = PivotTable(gviz_table, 1, 0, {'agg':[{'aggType':'sum', 'valueIndex':3},
                                                      {'aggType':'sum', 'valueIndex':4}]
                                            }
                         );                                      
  dept_chart.draw(dept_pivot);

  // draw our table pivoted by the dept, with hidden person col
  var dept_chart_hid = new google.visualization.Table(document.getElementById('dept_pivot_gviztable_hidden_user')); 
  dept_pivot_hid = PivotTable(gviz_table, 1, 0, {'agg':[{'aggType':'sum', 'valueIndex':3},
                                                          {'aggType':'sum', 'valueIndex':4}],
                                                  'hideCols':[2]
                                                }
                         );                                      
  dept_chart_hid.draw(dept_pivot_hid);

  // draw our table pivoted by the dept, with hidden person col, and a computed column
  var dept_chart_comp = new google.visualization.Table(document.getElementById('dept_pivot_gviztable_hidden_user_comp')); 
  dept_pivot_comp = PivotTable(gviz_table, 1, 0, {'agg':[{'aggType':'sum', 'valueIndex':3},
                                                           {'aggType':'sum', 'valueIndex':4}],
                                                   'hideCols':[2],
                                                   'computed':{'values':[3,4], 'operation':'-'}
                                            }
                               );                                      
  dept_chart_comp.draw(dept_pivot_comp);


}
 
</script> 
 
 
  </head> 
  <body> 
 <p>Start table</p>
<div id="base_gviztable"> 
</div> 

<br><br>
<p>Pivoted by user</p>
<div id="user_pivot_gviztable"> 
</div>

<br><br>
<p>Pivoted by user, just income, hide col</p>
<div id="user_pivot_gviztable_income"> 
</div>

<br><br>
<p>Pivoted by dept</p>
<div id="dept_pivot_gviztable"> 
</div>

<br><br>
<p>Pivoted by dept with hidden column</p>
<div id="dept_pivot_gviztable_hidden_user"> 
</div>

<br><br>
<p>Pivoted by dept with hidden column, and computed column</p>
<div id="dept_pivot_gviztable_hidden_user_comp"> 
</div>


  </body> 
</html>